import {promises} from "./service/image";
import canvasStraw from "./canvas/Straw";
import canvasWallBrick from "./canvas/WallBrick";
import canvasWallSteel from "./canvas/WallSteel";
import canvasTank from "./canvas/Tank";
import tank from "./canvas/Tank";
import canvasWater from "./canvas/Water";
import bullet from "./canvas/Bullet";
import boss from "./canvas/Boss";
import player from "./canvas/Player";
import config from "./config";
import './style.scss'
import audio from "./service/audio";

const app = document.querySelector<HTMLDivElement>("#app")
// @ts-ignore
app.style.width = config.canvas.width + 'px'
// @ts-ignore
app.style.height = config.canvas.height + 'px'


export default {
    // 游戏当前状态
    gameStatus: 'init',//'gameStart' | 'gameFail' |'gameWin'| 'init'
    gameInterval: 0,//定时器
    // 游戏初始化
    gameBootstrap() {
        // 游戏开始点击事件
        // @ts-ignore
        app.addEventListener('click', async () => {
            await this.gameStart()
            // 游戏结束监听
            this.gameInterval = setInterval(() => {
                //玩家胜利
                if (tank.models.length <= 0) this.gameStatus = 'gameWin'
                //玩家失败
                if (player.models.length <= 0 || boss.models.length <= 0) this.gameStatus = 'gameFail'
                if (this.gameStatus == 'gameWin' || this.gameStatus == 'gameFail') {
                    this.gameOver()
                }
            }, 100)
        })
    },
    // 游戏开始
    async gameStart() {
        if (this.gameStatus != 'gameStart') {
            this.gameStatus = 'gameStart'
            //背景图片关闭
            // @ts-ignore
            app.style.backgroundImage = 'none';
            audio.start()//游戏开始的声音

            // console.log(promises)
            //先加载各种贴图
            await Promise.all(promises)
            // console.log(image.get('straw'))
            // 调用render方法渲染
            canvasStraw.render() // 画布渲染：草地
            canvasWallBrick.render() // 画布渲染：砖墙
            canvasWallSteel.render() // 画布渲染：钢墙
            canvasTank.render() // 画布渲染：敌方坦克
            canvasWater.render() // 画布渲染：水域
            bullet.render() // 画布渲染：子弹
            boss.render() // 画布渲染：boss,老巢
            player.render() // 画布渲染：玩家坦克
        }
    },

    // 游戏结束
    gameOver() {
        //关闭游戏运行的定时器
        clearInterval(this.gameInterval)
        // 敌方坦克停止
        tank.stop()
        // 子弹停止
        bullet.stop()
        this.gameOverText()
    },

    async gameOverText() {
        // @ts-ignore
        const el = document.createElement<HTMLCanvasElement>('canvas');
        // @ts-ignore
        el.width = config.canvas.width
        // @ts-ignore
        el.height = config.canvas.height
        // @ts-ignore
        const ctx = el.getContext('2d')

        ctx.fillStyle = '#fff'
        ctx.font = '80px CascadiaMono'
        ctx.textAlign='center'
        ctx.textBaseline = 'middle'
        ctx.fontWeight=900
        ctx.fillText(this.gameStatus==='gameWin'?'游戏胜利':'游戏失败', config.canvas.width/2, config.canvas.height/2)
        // @ts-ignore
        app.appendChild(el)
    }
}
